/** ConditionsIndex
 *  条件配置组件
 */

import React, { useState, useRef, useEffect } from 'react';
import { Row, Col, message, Tag } from 'antd';
import Modal from 'src/components/Modal';
import Conditions from './Conditions';
import { IconFont } from 'src/components/IconFont';
import { JUNCTION_TYPE, VARIABLE_TYPE } from 'src/utils/constant';
import PopValue from 'src/components/PopTab/PopValue';
import ResultStyle from 'src/routers/Strategy/Strategy/Component/test/resultStyle';
import { getVariableValue } from 'src/utils/variable';
import './index.less';
import './conditionText.less';
import { randomKey } from 'src/utils/utils';
import { compare } from 'src/utils/compare';

export default function ConditionsIndex(props) {
  const { logs = {}, disabled = false, isHit } = props;
  const [value, setValue] = useState([]);
  useEffect(() => {
    setValue(props.value);
  }, [props.value]);

  const conditionsConfig = useRef(null);

  // 命中情况 true 命中 false 未命中 undefined 日志未返回该条件 默认展示详情
  // const getHitResult = (id) => {
  //   const conditionLogList = flattenDepth(logs.rules.map((item) => item.conditions));
  //   return (conditionLogList.find((item) => item.id === id) || {}).hit;
  // };

  const openConfig = () => {
    const modelIds = randomKey();
    if (props.leftConditionValue && !props.leftConditionValue.var_code) {
      message.warning('请先设置左变量');
      return;
    }
    Modal.open({
      title: '配置条件',
      width: 800,
      key: modelIds,
      content: (
        <div style={{ marginBottom: '20px', minHeight: '300px' }}>
          <Row type='flex' gutter={20} align='middle' style={{ marginBottom: '10px' }}>
            <Col span={4} style={{ textAlign: 'right' }}>
              左变量:
            </Col>
            <Col span={6}>
              <Row type='flex' justify='start' align='middle'>
                <Col span={22}>
                  <PopValue
                    value={{
                      var_code: props.leftConditionValue.var_code,
                      var_name: props.leftConditionValue.var_name,
                    }}
                    placeholder={'左变量'}
                    disabled={true}
                  />
                </Col>
                <Col span={2} />
              </Row>
            </Col>
          </Row>

          <Conditions
            modelId={modelIds}
            value={value}
            variable={props.variable}
            operatorOptions={props.operator}
            leftDisable={true}
            createRef={conditionsConfig}
            // isSingleCondition={true}
            singleJunction={(value && value[1] && value[1].junction_type && value[1].junction_type !== 'none') ? value[1].junction_type : 'and'}
            leftVar={{ code: props.leftConditionValue.var_code, type: props.leftConditionValue.var_type}}
          />
        </div>
      ),
      ok: () => {
        conditionsConfig.current.getValue(false, (value, error) => {
          if (!error) {
            setValue(value);
            props.onChange && props.onChange(value);
            Modal.close();
          }
        });
      },
      cancel: () => {},
    });
  };
  const isHasLog = Object.keys(logs).length > 0;
  const compareStyle = compare({...props, isArray: true}, 'conditions')
  const conditionItem = value ? <Row type='flex' align='middle'>
    {value.map((item, index) =>
      (<React.Fragment key={index}>
        {index > 0 && <Col className='condition-junction' style={compareStyle}>{JUNCTION_TYPE[item.junction_type]}</Col>}
        <Col>
          <span className='condition-operator-txt' style={compareStyle}>{item.operator && item.operator.symbol}</span>
          <span
            className={
              item.right_var_type === VARIABLE_TYPE._LITERAL
                ? 'condition-right-value right-constant'
                : 'condition-right-value'
            }
            style={compareStyle}
          >
            {item.right_var_name || item.right_var_code}
          </span>
        </Col>
      </React.Fragment>))}
  </Row> : ''
  // console.log(value)
  return (
    <div className={`flex flex-space-between conditionsIndex ${disabled ? 'disabled' : ''}`}>
      <div>
        <Row type='flex' align='middle'>
          {value && value.length > 0 ? (
            (!isHasLog || isHit === undefined) ? <Col>
              <Row type='flex'>
                {isHasLog && <Col><Tag>未执行</Tag></Col>}
                <Col onClick={openConfig} className='condition-config-txt'>{conditionItem}</Col>
              </Row>
            </Col> : <Col>
              <ResultStyle
                tag
                hightLight
                isHit={isHit}
                top={conditionItem}
                bottom={
                  <>
                    {props.type === 'cross' && props.leftConditionValue.var_name + ':'}{' '}
                    {getVariableValue(props.leftConditionValue, logs.variables)}
                  </>
                }
              />
            </Col>
          ) : (
            !props.disabled && <Col onClick={openConfig}>
              <span className='condition-config-txt'>设置条件</span>
            </Col>
          )}
          {!props.disabled && (
            <Col>
              <IconFont type='iconpen' className='setting-icon operate-edit' onClick={openConfig} />
            </Col>
          )}
        </Row>
      </div>
    </div>
  );
}
